<template>
	<view class="forgetPassword">
		<view class="forgetPassword-plate-1">
			<image src="../../../static/logo.png" mode="widthFix"></image>
			<navigator url="../login" open-type="navigateBack" hover-class="none">
				<u-icon name="close" color="#fff" size="34"></u-icon>
			</navigator>
		</view>
		<view class="forgetPassword-plate-2">
			<text>设置新密码</text>
		</view>
		<view class="forgetPassword-plate-3">
			<view class="item">
				<input type="number" v-model="account" placeholder="手机号" placeholder-style="color:#fff" />
				<view class="code-btn">{{codeBtn}}</view>
			</view>
			<view class="item">
				<input type="number" v-model="code" placeholder="验证码" placeholder-style="color:#fff" />
			</view>
			<view class="item">
				<input type="password" v-model="password" placeholder="请设置登录密码" placeholder-style="color:#fff" />
			</view>
			<view class="item">
				<input type="password" v-model="reusePassword" placeholder="请重复登录密码" placeholder-style="color:#fff" />
			</view>
		</view>
		<view class="forgetPassword-plate-4">
			<text>请输入密码（6~20位字母和数字组合）</text>
		</view>
		<view class="forgetPassword-plate-5">
			<button class="login-btn" hover-class="bg-btn">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account:Number,
				codeBtn:'获取验证码',
				code:Number,
				password:'',
				reusePassword:''
			};
		}
	}
</script>

<style lang="scss" scoped>
.forgetPassword{
	width: 100vw;
	min-height: 100vh;
	background: #0d73ff;
	padding: 120rpx 80rpx;
	.forgetPassword-plate-1{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 77rpx;
		image{
			width: 128rpx;
		}
	}
	.forgetPassword-plate-2{
		margin-bottom: 108upx;
		text{
			font-size: 54rpx;
			font-weight: 700;
			color: #ffffff;
		}
	}
	.forgetPassword-plate-3{
		.item{
			position: relative;
			margin-bottom: 10rpx;
			input{
				font-size: 30rpx;
				color: #ffffff;
				padding: 40rpx 0;
				border-bottom: 1rpx solid #fff;
			}
			.code-btn{
				position: absolute;
				width: 150rpx;
				height: 24rpx;
				bottom: 40upx;
				right: 0;
				line-height: 24rpx;
				text-align: center;
				color: #fff;
			}
		}
		.item:last-child{
			margin-bottom: 0rpx;
		}
	}
	.forgetPassword-plate-4{
		color: #fff;
		display: flex;
		font-size: 24rpx;
		margin-top: 18rpx;
		margin-bottom: 77rpx;
	}

}
</style>
